<template>
    <div class="cm-bg-c">
        <el-row v-if="status === 0">
            <el-col :span="12">
                <el-alert title="您提交的资料已审核通过，请立即上传资料！" type="success" show-icon />
                <el-form class="zw-el-form" ref="formRef" :rules="rules" :model="form" label-width="170px">
                    <el-row class="zw-form-item">
                        <el-col :span="10">
                            <el-form-item label="营业执照图片" prop="ImgForLicense" :error="uploadErrMsg.ImgForLicense">
                                <ImgUpload @imgStateChange="imgChangeHandler($event, 'ImgForLicense')" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10">
                            <el-form-item
                                label="法人身份证头像图片"
                                prop="ImgFrontForCorporate"
                                :error="uploadErrMsg.ImgFrontForCorporate">
                                <ImgUpload @imgStateChange="imgChangeHandler($event, 'ImgFrontForCorporate')" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10">
                            <el-form-item
                                label="法人身份证国徽图片"
                                prop="ImgBackForCorporate"
                                :error="uploadErrMsg.ImgBackForCorporate">
                                <ImgUpload @imgStateChange="imgChangeHandler($event, 'ImgBackForCorporate')" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item" v-if="proposer === '2'">
                        <el-col :span="10">
                            <el-form-item
                                label="代理人身份证头像图片"
                                prop="ImgFrontForAgent"
                                :error="uploadErrMsg.ImgFrontForAgent"
                                :rules="{
                                    required: proposer === '2',
                                    message: '请上传代理人身份证头像图片',
                                    trigger: 'blur'
                                }">
                                <ImgUpload @imgStateChange="imgChangeHandler($event, 'ImgFrontForAgent')" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item" v-if="proposer === '2'">
                        <el-col :span="10">
                            <el-form-item
                                label="代理人身份证国徽图片"
                                prop="ImgBackForAgent"
                                :error="uploadErrMsg.ImgBackForAgent"
                                :rules="{
                                    required: proposer === '2',
                                    message: '请上传代理人身份证国徽图片',
                                    trigger: 'blur'
                                }">
                                <ImgUpload @imgStateChange="imgChangeHandler($event, 'ImgBackForAgent')" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item" v-if="proposer === '2'">
                        <el-col :span="10">
                            <el-form-item
                                label="代理人委托书"
                                prop="ImgForAgentPaper"
                                :error="uploadErrMsg.ImgForAgentPaper"
                                :rules="{
                                    required: proposer === '2',
                                    message: '请上传代理人委托书',
                                    trigger: 'blur'
                                }">
                                <ImgUpload @imgStateChange="imgChangeHandler($event, 'ImgForAgentPaper')" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <div class="footer">
                <div class="divider"></div>
                <el-button type="primary" @click="submitHandler">上传资料</el-button>
            </div>
        </el-row>
        <div class="updoc-status" v-if="status === 1">
            <img class="tip-img" src="@/assets/imgs/sys/pay-updoc-auth.png" />
            <span class="tip-text">资料已提交，待平台审核！</span>
            <el-button type="primary" @click="submitHandler">提交开通</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import request from '@/request';
import storage from '@/commons/storage';
import ImgUpload from '@/components/ImgUpload.vue';
const props = defineProps({
    // 提交人是否是企业法人1-法人2-代理人
    proposer: {
        type: String,
        default: '2'
    }
});
const emit = defineEmits(['submit']);
const formRef = ref(null);
const form = reactive({
    /** 营业执照*/
    ImgForLicense: '',
    /** 法人身份证头像*/
    ImgFrontForCorporate: '',
    /** 法人身份证国徽图片*/
    ImgBackForCorporate: '',
    /** 代理人身份证头像*/
    ImgFrontForAgent: '',
    /** 代理人身份证国徽图片*/
    ImgBackForAgent: '',
    /** 代理人委托书*/
    ImgForAgentPaper: ''
});
const uploadErrMsg = reactive({
    ImgForLicense: '',
    ImgFrontForCorporate: '',
    ImgBackForCorporate: '',
    ImgFrontForAgent: '',
    ImgBackForAgent: '',
    ImgForAgentPaper: ''
});
const rules = reactive({
    ImgForLicense: [{ required: true, message: '请上传营业执照图片', trigger: 'blur' }],
    ImgFrontForCorporate: [{ required: true, message: '请上传法人身份证头像图片', trigger: 'blur' }],
    ImgBackForCorporate: [{ required: true, message: '请上传法人身份证国徽图片', trigger: 'blur' }]
});
const status = ref(0);

const submitHandler = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            let formData = {
                licenseImg: form.ImgForLicense,
                corporateFrontImg: form.ImgFrontForCorporate,
                corporateBackImg: form.ImgBackForCorporate,
                loginNo: storage.get('ZW-TENANT-LOGINNO').loginNo
            };
            if (props.proposer === '2') {
                formData.agentFrontImg = form.ImgFrontForAgent;
                formData.agentBackImg = form.ImgBackForAgent;
                formData.agentPaper = form.ImgForAgentPaper;
            }
            await request('baofuOpenUpload', formData);
            emit('submit');
        }
    });
};

const imgChangeHandler = ({ imgUrl, msg }, prop) => {
    form[prop] = imgUrl || '';
    uploadErrMsg[prop] = msg || '';
    imgUrl && formRef.value.validateField(prop);
};
</script>
<style lang="scss" scoped>
@import './style.scss';

.zw-el-form {
    margin-top: 16px;
}

.zw-el-form :deep(.el-form-item__error) {
    white-space: nowrap;
}

.footer {
    width: 100%;
    height: 120px;
    text-align: left;
    box-sizing: border-box;
}
.divider {
    height: 2px;
    background-color: #eaeaea;
    margin: 30px 0;
}
.updoc-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;

    .tip-img {
        width: 80px;
        height: 80px;
    }

    .tip-text {
        margin-top: 40px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 300;
        color: #33302d;

        .err-info {
            color: #4a90e2;
        }
    }
}

.el-popper.updoc-popper {
    .ul {
        display: flex;
        flex-direction: column;

        .li {
            line-height: 19px;
            font-size: 14px;
            font-weight: 300;
            color: #33302d;
        }
    }
}
</style>
